<template>
  <div
    class="container"
    :style="{ background: packageColor ? packageColor : defaultColor }"
  >
    <div v-title :data-title="pageTitle"></div>
    <div class="banner_box">
      <img :src="bgcImg" mode="" class="banner_img" />
    </div>
    <div v-if="myTitle !== '贵州' && myTitle !== '四川'">
      <div class="guizhou_gif_box">
        <img src="@/assets/img-phone.gif" alt="" class="guizhou_gif" />
      </div>
      <div class="guizhou_input_box">
        <el-input
          v-model="phoneNumber"
          :placeholder="defaultPlaceholder"
          maxlength="11"
          :disabled="isDisabledPhone"
          @input="handlePhoneNum"
          onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode)))"
        ></el-input>
      </div>

      <div class="guizhou_code_box">
        <div>
          <el-input
            v-model="codeNumber"
            placeholder="请输入验证码"
            maxlength="11"
            class="input_self"
          ></el-input>
        </div>
        <el-button
          type="text"
          :disabled="countdown > 0"
          style="
            color: #d18340;
            font-weight: 550;
            font-size: 15px;
            padding-left: 15px;
          "
          @click="startCountdown($event)"
        >
          {{ countdown > 0 ? countdown + "秒后重新发送" : "获取验证码" }}
        </el-button>
      </div>
    </div>

    <div v-if="myTitle == '四川'">
      <div class="guizhou_gif_box">
        <img src="@/assets/img-phone.gif" alt="" class="guizhou_gif" />
      </div>
      <div class="guizhou_input_box">
        <el-input
          v-model="phoneNumber"
          :placeholder="defaultPlaceholder"
          maxlength="11"
          :disabled="isDisabledPhone"
          @input="handlePhoneNumSichuan"
          onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode)))"
        ></el-input>
      </div>
      <!-- <div class="guizhou_code_box">
        <div>
          <el-input v-model="codeNumber" placeholder="请输入验证码" maxlength="11" class="input_self"></el-input>
        </div>
        <el-button type="text" :disabled="countdown > 0"
          style=" color: #d18340; font-weight: 550; font-size: 15px; padding-left: 15px"
          @click="startCountdown($event)">
          {{ countdown > 0 ? countdown + '秒后重新发送' : '获取验证码' }}
        </el-button>
      </div> -->
    </div>

    <div class="submit_btn_box">
      <img
        :src="btnImage ? baseImgUrl + btnImage : btnImageDefault"
        mode=""
        class="submit_btn"
        @click="getAdAndShows()"
      />
    </div>

    <div class="read_all">
      <el-checkbox v-model="cehckRead">
        <div class="read_box">
          我已阅读并同意
          <span class="read_title" @click="handleRead"
            >《个人信息授权和保护声明》</span
          >
        </div>
      </el-checkbox>
    </div>
    <div class="foot_img_box" v-if="footImg" v-html="footImg"></div>

    <!-- 验证码错误弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisibleError" width="80%">
      <span>{{ errorMsg }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleError = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 个人信息授权和保护声明弹窗 -->
    <el-dialog
      title="个人信息授权和保护声明"
      :visible.sync="dialogVisibleEmpower"
      width="90%"
    >
      <div v-html="empowerContent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleEmpower = false"
          >我已知晓</el-button
        >
      </span>
    </el-dialog>

    <!-- 进入页面提示弹窗 -->
    <el-dialog title="套餐介绍" :visible.sync="dialogVisibleTip" width="90%">
      <div class="dialog_tip_box" v-if="dialogVisibleTip">
        <div class="dialog_circle_box" v-if="isShowCountDown">
          <div class="dialog_circle_all"></div>
          <div class="dialog_circle_num">
            {{ dialogCountdown }}
          </div>
        </div>
      </div>
      <div class="tip_dialog_box">
        <div>
          {{ miniText }}
        </div>
      </div>

      <div
        style="border: 1px solid #ccc; margin-bottom: 10px; border-radius: 40px"
      >
        <el-input
          v-model="phoneNumber"
          :placeholder="defaultPlaceholder"
          maxlength="11"
          type="number"
          :disabled="isDisabledPhone"
          @input="handlePhoneNum"
          onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode)))"
        ></el-input>
      </div>

      <div
        style="
          display: flex;
          align-items: center;
          border: 1px solid #ccc;
          padding-right: 10px;
          border-radius: 40px;
        "
      >
        <el-input
          v-model="codeNumber"
          placeholder="请输入验证码"
          maxlength="11"
          class=""
        ></el-input>
        <div>
          <el-button
            type="text"
            :disabled="countdown > 0"
            style="color: #d18340; font-weight: 550; font-size: 15px"
            @click="startCountdown($event)"
          >
            {{ countdown > 0 ? countdown + "秒后重新发送" : "获取验证码" }}
          </el-button>
        </div>
      </div>

      <span slot="footer" class="dialog-footer tip_btn">
        <el-button :disabled="isDisabledDialog" @click="cancelDialogTip"
          >我再想想</el-button
        >
        <el-button
          type="primary"
          :disabled="isDisabledDialog"
          @click="sureDialogTip"
          >确认订购</el-button
        >
      </span>
    </el-dialog>
    <!-- 遮罩层 -->
    <div class="mask" v-if="dialogVisibleTip"></div>

    <!-- 吉林二确弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisibleJilin" width="90%">
      <div class="jilin_dialog_box">
        <div class="jilin_dialog_title">
          {{ miniText }}
        </div>
        <div class="jilin_btn_box">
          <el-button type="info" @click="handleCancelJilin">残忍拒绝</el-button>
          <el-button type="primary" @click="handleSureJilin"
            >确定办理</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import llgsdk from "./utils/liuliangguoSDK_min";
import { Debounce, Throttle } from "./utils/common";

export default {
  data() {
    return {
      phoneNumber: "",
      codeNumber: "",
      urlParamsObj: {
        packageId: "",
        account_code: "",
        ad_position_id: "",
        clickid: "",
        channeId: "",
      },
      baseImgUrl: "https://nu.landing.yihangdianzi.cn/packages/",
      bgcImg: "",
      footImg: "",
      pageTitle: "",

      countdown: 0,
      timer: null,
      codeKeys: "",
      packageColor: "",
      defaultColor: "#ffe4bd",
      dialogVisibleError: false,
      errorMsg: "",
      isShowCode: true,
      isDisabledPhone: false,
      cehckRead: false,
      dialogVisibleEmpower: false,
      empowerContent: `
          <p>尊敬的客户：</p>
          <br />
          <p>您好!</p>
          <p>
            根据《中华人民共和国网络安全法》、《全国人民代表大会常务委员会关于加强网络信息保护的决定》、《电信和互联网用户个人信息保护规定》（工业和信息化部令第24号）和《电话用户真实身份信息登记规定》（工业和信息化部令第25号）等国家法律法规的要求，客户在我公司各类营业网点（含自有营业厅、手机营业厅、网上营业厅、授权合作代理店等）办理移动电话（含无线上网卡）、固定电话、家庭宽带入网、过户以及需要出示客户证件的有关业务时，客户应配合出示有效身份证件原件并进行查验、登记。登记信息包括姓名或名称、证件类型、号码及地址等。同时，为更好地提供服务，需要客户提供如联系人、联系电话、通信地址、电子邮箱等信息。客户本人持有效身份证件可通过自有营业厅查询和/或更正本人信息，或登录手机营业厅查询本人信息。如客户拒绝依法提供个人有效证件及真实信息，我公司有权不提供服务或终止服务。  
          </p>
          <br />
          <p>
            为向客户提供优质、个性化的服务，包括但不限于提供通信服务、保障通信服务安全、改善服务质量、推介个性化产品等，我公司将遵循合法、正当、必要的原则，按照法律法规规定和/或协议约定使用留存客户个人信息，并妥善保管，严格保密，依法保护客户个人信息，非因下列事由，不对外提供客户个人信息：  
          </p>
          <br />
          <p>1）事先获得客户的明确授权；</p>
          <p>2）根据有关的法律法规要求；</p>
          <p>3）按照相关司法机关和/或政府主管部门的要求；</p>
          <p>4）为维护社会公众的利益所必需且适当；</p>
          <p>5）为维护我公司或客户的合法权益所必需且适当。</p>
      `,
      urlHost: "",
      dialogVisibleTip: false,
      miniText: "",
      dialogCountdown: 0,
      isDisabledDialog: false,
      isShowCountDown: true,
      isSichuan: false,
      userAppId: "",
      phoneNumberTop: "",
      serialNumber: "",
      myTitle: "",
      defaultPlaceholder: "",
      dialogVisibleJilin: false,
      btnImage: "",
      btnImageDefault: "",
    };
  },
  mounted() {
    this.btnImageDefault = require("./assets/img-btn.png");
    this.getDialogCountDown();
    this.getUrlHost();
    this.getUrlParam();

    this.getSiChuanAppId();
  },
  watch: {
    countdown: {
      handler(newVal) {
        this.countdown = newVal;
      },
    },
  },
  methods: {
    // 四川号码获取appid接口
    getSiChuanAppId() {
      const axios = require("axios");
      axios
        .post(
          "https://nu.landing.yihangdianzi.cn/api/getSiChuanAppId",
          {
            package_id: this.urlParamsObj.packageId,
          },
          "POST"
        )
        .then((res) => {
          console.log("四川号码获取appid接口成功", res);
          if (res.data.code == 1) {
            this.userAppId = res.data.data;
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        });
    },

    // 四川预下单接口
    handlePrepareOrder() {
      const axios = require("axios");
      const that = this;
      axios
        .post(
          "https://nu.landing.yihangdianzi.cn/api/handlePrepareOrder",
          {
            package_id: this.urlParamsObj.packageId,
            handlePhone: this.phoneNumber,
          },
          "POST"
        )
        .then((res) => {
          console.log("四川预下单接口成功", res);
          if (res.data.code == 1) {
            this.serialNumber = res.data.data;

            $("#showPop").popupInit({
              appid: that.userAppId,
              serialNumber: res.data.data,
              callback: function (data) {
                console.log("dayin222222", data);
                alert(data.res_code);
              },
            });
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        });
    },

    // 获取当前url域名
    getUrlHost() {
      this.urlHost = location.host;
    },

    // 我已阅读
    handleRead() {
      this.dialogVisibleEmpower = true;
    },

    // 获取验证码
    getZyxSendSmsCode() {
      const axios = require("axios");
      this.isDisabledPhone = true;
      this.cehckRead = true;
      axios
        .post(
          "https://nu.landing.yihangdianzi.cn/api/zyxSendSmsCode",
          {
            handlePhone: this.phoneNumber,
            package_id: this.urlParamsObj.packageId,
            channe_id: this.urlParamsObj.channeId,
            click_id: this.urlParamsObj.clickid,
            account_code: this.urlParamsObj.account_code,
          },
          "POST"
        )
        .then((res) => {
          console.log("发送成功", res);
          if (res.data.code == 1) {
            // this.getCountDown()
            // this.isShowCode = true
            this.$message.success(res.data.msg);
            this.codeKeys = res.data.data;
          } else {
            // this.isShowCode = false
            this.isDisabledPhone = false;
            this.$message.error(res.data.msg);
            return;
          }
        });
    },

    // 校验验证码是否正确
    getZyxHandle() {
      const that = this;
      const axios = require("axios");
      axios
        .post("https://nu.landing.yihangdianzi.cn/api/zyxHandle", {
          handlePhone: this.phoneNumber,
          // code: '509285',
          code: this.codeNumber,
          // keys: 'aac1d38d826f4954b4a805e1327a4095'
          keys: this.codeKeys,
          package_id: this.urlParamsObj.packageId,
          channe_id: this.urlParamsObj.channeId,
          click_id: this.urlParamsObj.clickid,
          account_code: this.urlParamsObj.account_code,
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.$message.success("办理成功");
          } else if (res.data.code == 2) {
            // 展示弹窗
            this.errorMsg = res.data.msg;
            this.dialogVisibleError = true;
          } else {
            if (this.urlParamsObj.ad_position_id) {
              that.getOrderInsertLlg();
            } else {
              that.$message.error("办理失败");
              return;
            }
          }
        });
    },

    // 获取背景图
    getBgcImg() {
      const that = this;
      const axios = require("axios");
      axios
        .get(
          "https://nu.landing.yihangdianzi.cn/api/getAllPackage?package_id=" +
            this.urlParamsObj.packageId,
          "GET"
        )
        .then((res) => {
          console.log("查看背景图", res);
          this.bgcImg = this.baseImgUrl + res.data.package.head_img;
          this.footImg = res.data.package.details;
          this.pageTitle = res.data.package.name;
          this.packageColor = res.data.package.color;
          this.miniText = res.data.package.mini_text;
          this.myTitle = res.data.package.my_title;
          this.defaultPlaceholder = `请输入${this.myTitle}移动手机号码`;
          this.btnImage = res.data.package.image;
        });
    },

    getUrlParam() {
      this.locationUrl = window.location.href;
      console.log("打印拼接参数", this.locationUrl.split("?")[1]);
      const that = this;
      this.urlParamsObj.packageId = that.getQueryString("package_id")
        ? that.getQueryString("package_id")
        : "";

      this.urlParamsObj.account_code = that.getQueryString("account_code")
        ? that.getQueryString("account_code")
        : "";

      this.urlParamsObj.ad_position_id = that.getQueryString("ad_position_id")
        ? that.getQueryString("ad_position_id")
        : "";

      this.urlParamsObj.ssp_source = that.getQueryString("ssp_source")
        ? that.getQueryString("ssp_source")
        : "";

      this.urlParamsObj.clickid = that.getQueryString("clickid")
        ? that.getQueryString("clickid")
        : "";

      this.urlParamsObj.channeId = that.getQueryString("channe_id")
        ? that.getQueryString("channe_id")
        : "";

      this.getBgcImg();
    },

    // 用正则获取url参数
    getQueryString(name) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      let url = window.location.href.split("?")[1].match(reg);
      if (url != null) {
        return decodeURI(url[2]); //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
      } else {
        return null;
      }
    },

    // 调接口
    getOrderInsertLlg() {
      const axios = require("axios");
      axios
        .post(
          "https://gba4269.zhonglianhuashu.com/api/orderInsertLlg",
          {
            mobile: this.phoneNumber,
            click_id: this.urlParamsObj.clickid,
            package_id: this.urlParamsObj.packageId,
            channe_id: this.urlParamsObj.channeId,
            account_code: this.urlParamsObj.account_code,
          },
          "POST"
        )
        .then((res) => {
          const params = {
            ssp_source:
              "packageId=" +
              this.urlParamsObj.packageId +
              "&" +
              "account_code=" +
              this.urlParamsObj.account_code,
            app_key: "LLG10005560",
            app_secret: "ed62a0d4b9edfb65ec3d720dcc4b93db",
            ad_position_id: this.urlParamsObj.ad_position_id,
            phone: this.phoneNumber,
            fail_message: "用户失败原因",
            product_name: "原投放的产品名称",
          };
          console.log(params, "aaaaaaaaaaaaaaaa");
          llgsdk.getAdAndShow(params, function (res) {
            console.log(res, "啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊");
          });
        });
    },

    // 非四川提交
    getAdAndShows: Throttle(function (val) {
      if (this.myTitle == "贵州") {
        if (this.cehckRead == false) {
          this.$message.warning("请勾选我已阅读并同意");
          return;
        } else {
          // this.dialogCountdown = 3
          this.getDialogCountDown();
          this.isShowCountDown = true;
          this.dialogVisibleTip = true;
        }
      } else {
        this.getZyxHandle();
      }
    }, 2000),

    // 四川提交
    getAdSichuanShows() {
      if (this.phoneNumber == "") {
        this.$message.warning("请输入四川移动手机号");
        return;
      } else if (this.cehckRead == false) {
        this.$message.warning("请勾选我已阅读并同意");
        return;
      } else {
        this.handlePrepareOrder();
      }
    },

    // 吉林提交
    getAdJilinShows: Throttle(function (val) {
      if (this.phoneNumber == "") {
        this.$message.warning("请输入吉林移动手机号码");
        return;
      } else if (this.codeNumber == "") {
        this.$message.warning("请输入验证码");
        return;
      } else {
        this.dialogVisibleJilin = true;
      }
    }, 2000),

    // 吉林确定
    handleSureJilin() {
      this.getZyxHandle();
    },

    // 吉林拒绝
    handleCancelJilin() {
      this.dialogVisibleJilin = false;
    },

    // 获取验证码
    startCountdown(event) {
      if (this.phoneNumber == "") {
        this.$message.error("请输入手机号");
        return;
      } else {
        this.getCountDown();
        this.getZyxSendSmsCode();
      }
    },

    // 输入框失去焦点
    handleBlurNumber() {
      console.log("失去焦点", this.phoneNumber);
      // if (this.phoneNumber == '') {
      //   this.$message.error('请输入手机号')
      //   return
      // }
      // if (this.phoneNumber.length == 11) {
      //   this.getCountDown()
      //   this.getZyxSendSmsCode()
      // }
    },

    // 获取短信验证码
    getCountDown() {
      this.countdown = 180;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          this.isDisabledPhone = false;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },

    // 获取弹窗确定按钮倒计时
    getDialogCountDown() {
      this.isDisabledDialog = true;
      this.dialogCountdown = 3;
      this.timer = setInterval(() => {
        if (this.dialogCountdown > 0) {
          this.dialogCountdown--;
        } else {
          this.isDisabledDialog = false;
          clearInterval(this.timer);
          this.timer = null;
          this.isShowCountDown = false;
        }
      }, 1000);
    },

    // 套餐介绍弹窗确定
    sureDialogTip() {
      // this.dialogVisibleTip = false
      if (this.phoneNumber == "") {
        this.$message.error("请输入手机号");
        return;
      } else if (this.codeNumber == "") {
        this.$message.error("请输入验证码");
        return;
      } else {
        this.getZyxHandle();
        // const llgsdk = typeof llgsdk === 'undefined' ? '' : llgsdk
      }
    },

    // 套餐介绍弹窗取消
    cancelDialogTip() {
      this.dialogVisibleTip = false;
    },

    // 判断是否输入11为手机号
    handlePhoneNum() {
      console.log(this.phoneNumber.length);
      if (this.phoneNumber.length !== 11) {
        // this.isShowCode = false
        // this.$message.warning('请输入11位手机号')
        return;
      } else {
        this.startCountdown();
      }
    },

    // 四川手机号输入框事件
    handlePhoneNumSichuan() {
      if (this.phoneNumber.length !== 11) {
        // this.isShowCode = false
        // this.$message.warning('请输入11位手机号')
        return;
      } else {
        this.cehckRead = true;
      }
    },
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html,
body {
  background: #f9f7d0;
}

.banner_box {
  width: 100%;
}

.guizhou_gif_box {
  width: 61%;
  height: 57px;
}

.guizhou_gif {
  width: 100%;
  height: 100%;
}

.el-input__inner {
  height: 50px !important;
  border-radius: 40px !important;
  font-size: 17px !important;
  border: none !important;
}

.guizhou_input_box {
  display: flex;
  background: #fff;
  border-radius: 40px;
  margin: 0 10px;
}

.guizhou_code_box {
  display: flex;
  align-items: baseline;
  margin: 0 10px 0;
}

.banner_img {
  width: 100%;
}

.input_phone_box {
  position: relative;
  display: flex;
  align-items: center;
  /* background: #fff; */
  padding: 0 12px;
  border-radius: 20px;
  /* border: 1px solid #ccc; */
  margin-top: 20px;
}

.input_phone_img {
  position: absolute;
  top: -45px;
  left: 0;
  z-index: 999;
}

.phone_img {
  width: 100%;
  height: 50px;
}

.input_box {
  display: flex;
  align-items: baseline;
  background: #fff;
  padding: 0 12px;
  /* margin: 0 30px; */
  border-radius: 20px;
  /* border: 1px solid #ccc; */
  margin-top: 18px;
}

.input_line {
  width: 2px;
  height: 14px;
  border-radius: 20px;
  background: #d18340;
  margin-right: 8px;
}

.submit_btn_box {
  display: flex;
  justify-content: center;
  padding: 22px 0 0;
}

.read_all {
  display: flex;
  justify-content: center;
  padding: 19px 0 10px;
}

.read_box {
  color: #cf594d;
  font-size: 15px;
}

.read_title {
  color: #c1261d;
  font-weight: 550;
}

.foot_img_box {
  width: 100%;
}

.tip_dialog_box {
  padding-bottom: 30px;
}

.dialog_tip_box {
  position: absolute;
  top: -24%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  z-index: 1000;
}

.dialog_circle_box {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

.dialog_circle_all {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  animation: spin 2s linear infinite;
}

.dialog_circle_num {
  position: absolute;
  top: 20px;
  left: 48%;
  color: #7fb5cb;
  font-size: 26px;
  font-weight: 550;
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.dialog_tip_all {
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px 15px;
}

.dialog_tip_title {
  text-align: center;
  font-size: 18px;
  font-weight: 550;
  color: #303133;
  padding-bottom: 15px;
}

.dialog_tip_minitext {
  font-size: 18px;
  font-weight: 550;
  color: #303133;
  padding-bottom: 15px;
}

.tip_btn {
  display: flex;
  padding-top: 20px;
}

.mask {
  position: fixed;
  /* 遮罩层相对于容器定位 */
  top: 0;
  /* 从容器的顶部开始 */
  left: 0;
  /* 从容器的左侧开始 */
  width: 100%;
  /* 宽度等于容器 */
  height: 100%;
  /* 高度等于容器 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 设置背景色为半透明的黑色 */
  z-index: 999;
}

.jilin_dialog_box {
  padding: 0 5px;
}

.jilin_dialog_title {
  font-size: 20px;
}

.jilin_btn_box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-top: 1px solid #fcfcfc;
  padding-top: 20px;
}

.tip_btn {
  display: flex;
  justify-content: center;
}

img {
  width: 100%;
  height: 100%;
}

@keyframes xing {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }
}

.submit_btn {
  width: 60%;
  height: 72px;
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
}
</style>
